import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { DjRecommendWrapper } from './style'
import DjRadioHeader from '@/components/djradio-header'
import DjRadioCover from '@/components/djradio-cover'
import { useAppSelector, useAppDispatch } from '@/store'
import { fetchDjRadioRecommendAction } from '@/views/discover/c-page/djradio/store/djradio'

interface IProps {
  children?: ReactNode
}

const DjRecommend: React.FC<IProps> = () => {
  const { currentId, djRadioRecommend } = useAppSelector((state) => ({
    currentId: state.djradio.currentId,
    djRadioRecommend: state.djradio.djRadioRecommend
  }))
  const dispatch = useAppDispatch()

  useEffect(() => {
    const type = currentId === 0 ? 3 : currentId
    dispatch(fetchDjRadioRecommendAction(type))
  }, [dispatch, currentId])
  return (
    <DjRecommendWrapper>
      <DjRadioHeader title="优秀新电台"></DjRadioHeader>

      <div className="radio-list">
        {djRadioRecommend.slice(0, 5).map((item,index) => {
          return <DjRadioCover data={item} key={index} />
        })}
      </div>
    </DjRecommendWrapper>
  )
}

export default memo(DjRecommend)
